<template>
  <div class="header">
    <div class="js" @click="onClickLeft">
      <van-icon name="arrow-left"/>
      <span class="span">讲师详情</span>
    </div>
    <div class="nl">
      <van-image round width="50" height="50" lazy-load src="https://img01.yzcdn.cn/vant/cat.jpeg" />
      <em class="em">女 年教龄</em>
      <van-button round type="info">取消关注</van-button>
    </div>
    <div class="jx">
      <ul class="ul">
        <li>讲师介绍</li>
        <li>主讲课程</li>
        <li>学员评价</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  // 组件状态值
  data() {
    return {};
  },
  // 生命周期
  mounted() {},
  // 组件方法
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 过滤器
  filters: {},
  // 自定义指令
  directives: {},
};
</script> 

<style scoped>
.header {
  background: #5ba2f4;
  width: 100%;
  height: 75px;
  line-height: 30px;
}
.js {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  color: white;
  padding-top: 10px;
}
.span {
  text-align: center;
  display: block;
  margin-left: 138px;
}
.nl {
  width: 95%;
  height: 85px;
  position: absolute;
  top: 50px;
  background: white;
  margin-left: 10px;
  border-radius: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.van-button {
  width: 80px;
  height: 25px;
  background: #ebeefe;
  color: #eb6100;
  font-size: 5px;
  margin-left: 143px;
  border: 0;
}
.van-image {
  margin-left: 10px;
}
.jx {
  margin-top: 35px;
  background: #f2f3f5;
  width: 100%;
  height: 1000px;
  padding-top: 75px;
}
.ul {
  width: 100%;
  height: 50px;
  background: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
li:hover,.active{
    color: #eb6100;
    border-bottom: 2px solid #eb6100;
}
li{
    height: 100%;
    line-height: 50px;
}
.van-icon{
    margin-left: 10px;
}
</style>
